実装</2> データ構造 テストデータはタブ改行区切りとし、以下のオブジェクトに変換してオブジェクトストアに格納します。 ｛ id:連番, name:"氏名", nameKana:"氏名カナ", sex:"性別", bloodtype:"血液型", birthday:"誕生日", zipcode:"郵便番号", address:"住所", addressKana:"住所カナ" } 画面 ソート項目・ページ数を選択するプルダウンと、一覧のテーブル、詳細表示で構成された画面を用意します。 <select id="sort"> <option value="">id</option> <option value="byNameKana">氏名カナ</option> <option value="byZipcode">郵便番号</option> </select> <select id="pager"></select> <input id="nameKana" type="text" placeholder="氏名カナ" /> <button id="find">find</button> <table id="personTable"> <thead> <tr> <th>id</th> <th>氏名</th> <th>氏名カナ</th> <th>郵便番号</th> </tr> </thead> <tbody></tbody> </table> <dl> <dt>id</dt><dd id="lId"></dd> <dt>氏名</dt><dd id="lName"></dd> <dt>氏名カナ</dt><dd id="lNameKana"></dd> <dt>性別</dt><dd id="lSex"></dd> <dt>血液型</dt><dd id="lBloodType"></dd> <dt>誕生日</dt><dd id="lBirthday"></dd> <dt>郵便番号</dt><dd id="lZipcode"></dd> <dt>住所</dt><dd id="lAddress"></dd> <dt>住所カナ</dt><dd id="lAddressKana"></dd> </dl> データベース初期化 Indexed DB を使用する準備を行います。 //データベース名 var DB_NAME = 'indexed_db_sample'; //オブジェクトストア名 var STORE_NAME = 'person'; //データベース var db; //データベース接続 var rq = indexedDB.open(DB_NAME); //データベースが無い場合は作成する rq.onupgradeneeded = function(result) { db = this.result; //オブジェクトストアの作成 var store = db.createObjectStore(STORE_NAME, { keyPath: 'id', //「id」フィールドをキーとする autoIncrement: false, //キーの自動採番オフ }); //インデックスの作成 store.createIndex('byNameKana', 'nameKana'); store.createIndex('byZipcode', 'zipcode'); }; //接続完了 rq.onsuccess = function() { //データ取得処理・・・ } indexedDB オブジェクトの open メソッドでデータベースを開きます。もしデータベースが存在しない場合、onupgradeneeded のコールバックが呼び出されます。このコールバック内は特別なトランザクションがアクティブとなっており、ここでのみオブジェクトストアやインデックスの作成が行えます。トランザクションについては後程もう少し詳しく説明します。 ここでは、"person" という名前で、オブジェクトストアを作ります。id をキーとし、nameKana と zipcode にインデックスを作成します。 データ取得・Indexed DB への書き込み テストデータを読み込み、変換してオブジェクトストアに保存します。 $.ajax({ url:'testdata.txt', dataType:'text', success:function(data, textStatus, jqXHR) { //トランザクション開始　readwriteモード var tx = db.transaction(STORE_NAME, 'readwrite'); //トランザクション完了時のコールバック tx.oncomplete = function() { //リストの描画処理・・・ } //トランザクションを介してオブジェクトストアを参照 var store = tx.objectStore(STORE_NAME); //行に分割 var rows = data.split('\r\n'); for(var i=0, l=rows.length; i < l; i++) { //列に分割 var cols = rows[i].split('\t'); if(cols.length == 9) { //オブジェクトストアに格納 store.put({ id: parseInt(cols[0]),//数値としてソートしたい場合、変換を忘れずに！ name: cols[1], nameKana: cols[2], sex: cols[3], bloodType: cols[4], birthday: cols[5], zipcode: cols[6], address: cols[7], addresskana: cols[8] }); } } } }); [/javascript] トランザクションを開始する際には、モードを指定します。参照のみの場合は readonly 、データの登録更新削除を行う場合には readwrite を指定します。ここではデータを登録するので、readwrite を指定しています。オブジェクトストア作成時に、keyPath を id 、autoIncrement を false に指定しているので、登録データ内に必ず id フィールドが必要です。 ちなみに、前述のデータベース初期化時の、onupgradeneeded コールバック内のトランザクションのモードは versionchange という特別なもので、データベース構造の定義はこのモードでしか行えません。また、versionchange モードのトランザクションをマニュアルで開始することはできません。 Indexed DBで検索結果をキャッシュする #3 へ続きます。

データ構造

画面

データベース初期化

データ取得・Indexed DB への書き込み